<template>
  <div class="user-info">
    <!-- 个人信息 -->
    <el-form label-width="220px">
      <!--手机 聘用形式  -->
      <el-row class="inline-info">
        <el-col :span="12">
          <el-form-item label="手机">
            <el-input v-model="userInfo.mobile" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 工号 入职时间 -->
      <el-row class="inline-info">
        <el-col :span="12">
          <el-form-item label="入职时间">
            <el-date-picker
              v-model="userInfo.timeOfEntry"
              type="date"
              class="inputW"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 员工照片 -->
      <el-row class="inline-info">
        <el-col :span="12">
          <el-form-item label="员工头像">
            <!-- 放置上传图片 -->
            <uploadImg ref="staffPhoto" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 保存个人信息 -->
      <el-row class="inline-info" type="flex" justify="center">
        <el-col :span="12">
          <el-button type="primary" @click="hSaveUserDetailById"
            >保存更新</el-button
          >
          <el-button @click="$router.push('/employees')">返回</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { getUserDetailById, saveUserDetailById } from '@/api/employess'
import uploadImg from '@/components/UploadImg/uploadImg'
export default {
  // 组件名称
  name: 'userinfo',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { uploadImg },
  // 组件状态值
  data () {
    return {
      userInfo: {
        mobile: '',
        timeOfEntry: '',
        staffPhoto: '',
      },
    }
  },
  methods: {
    // 保存更新数据
    hSaveUserDetailById () {
      this.userInfo.staffPhoto = this.$refs.staffPhoto.imageUrl
      // 更新信息(包括头像)网络请求
      saveUserDetailById({ ...this.userInfo, id: this.$route.query.id }).then(res => {
        this.$message.success('更新成功')
        this.$router.push('/employees')
        this.$store.commit('user/SET_AVATAR', this.$refs.staffPhoto.imageUrl)
      })
    },
    // 获取个人信息网络请求
    GetUserDetailById () {
      getUserDetailById(this.$route.query.id).then(res => {
        this.userInfo = res.data
        this.$refs.staffPhoto.imageUrl = this.userInfo.staffPhoto
      })
    }
  },
  created () {
    this.GetUserDetailById()
  }
}
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>